<template>
  <div style="height:100%">
    <router-view class="content"></router-view>
    <tabbar>
      <tabbar-item v-if="systemCount != '0'" link="/index/systemInfo" :selected="$route.name=='systemInfo'" @on-item-click="test" :badge="systemCount">
        <img slot="icon" src="../assets/img/message@2x.png">
        <img slot="icon-active" src="../assets/img/message_active@2x.png">
        <span slot="label">消息</span>
      </tabbar-item>
      <tabbar-item v-else link="/index/systemInfo" :selected="$route.name=='systemInfo'" @on-item-click="test">
        <img slot="icon" src="../assets/img/message@2x.png">
        <img slot="icon-active" src="../assets/img/message_active@2x.png">
        <span slot="label">消息</span>
      </tabbar-item>
      <tabbar-item v-if="taskListCount != '0'" link="/index/home" :selected="$route.name=='home'" @on-item-click="test" :badge="taskListCount">
        <img slot="icon" src="../assets/img/platform@2x.png">
        <img slot="icon-active" src="../assets/img/platform_active@2x.png">
        <span slot="label">工作台</span>
      </tabbar-item>
      <tabbar-item v-else link="/index/home" :selected="$route.name=='home'" @on-item-click="test">
        <img slot="icon" src="../assets/img/platform@2x.png">
        <img slot="icon-active" src="../assets/img/platform_active@2x.png">
        <span slot="label">工作台</span>
      </tabbar-item>
      <tabbar-item v-show="projectFlag" link="/index/projectList" :selected="$route.name=='projectList'" @on-item-click="test">
        <img slot="icon" src="../assets/img/project@2x.png">
        <img slot="icon-active" src="../assets/img/project_active@2x.png">
        <span slot="label">项目</span>
      </tabbar-item>
      <tabbar-item link="/index/my" :selected="$route.name=='my'" @on-item-click="test">
        <img slot="icon" src="../assets/img/mine@2x.png">
        <img slot="icon-active" src="../assets/img/mine_active@2x.png">
        <span slot="label">我</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'

export default {
  name:'index',
  mounted(){
    this.test()
  },
  data(){
  return{
    // transitionName:"slide-left-in"
    // systemCount:this.$store.state.systemCount,
  }
  },
  methods:{
    test(){
      //console.log(22222222)
      // console.log("qwertyuiop",this.systemCount)
    }
  },
  computed:{
    systemCount(){
      return String(this.$store.state.systemCount)
    },
    taskListCount(){
      return String(this.$store.state.taskListCount)
    },
    projectFlag(){
      return this.$store.state.projectFlag
    }
  },
  watch: {
    // '$route'(to, from) {
    //   if(from.name=='home'){
    //     this.transitionName = 'slide-left-in'
    //   }else if(from.name=='personal'){
    //     this.transitionName = 'slide-right'
    //   }else{
    //     if(to.name=='home'){
    //       this.transitionName = 'slide-right'
    //     }else{
    //       this.transitionName = 'slide-left-in'
    //     }
    //   }
    // }
  },
  components: {
    Tabbar,
    TabbarItem
  }
}
</script>
<style scoped>
.weather {
  height: 20px;
  width: 20px;
  margin-right: 10px
}
.topic_right{
  line-height: 29px;
  display: flex;
  align-items: center;
}
.content{
  /* overflow-y: auto; */
  height: calc(100% - 50px) !important;
}
  .content::-webkit-scrollbar{
    width: 0;
  }
  .transition-view /deep/ .weui-tabbar{
    position: fixed;
    padding: 3px 0 0 0;
  }
</style>
